<template>
    <div>
        <div class="bread">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">
                    首页
                </el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/sms/coupon' }">
                    营销
                </el-breadcrumb-item>
                <el-breadcrumb-item>优惠价列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="con_view">

        </div>
        <el-card class="box-card">
            <el-form label-position="left" label-width="100px" :model="FormValue" style="max-width: 460px">
                <el-form-item label="优惠券类型：">
                    <el-select class="m-2" v-model="type.couponType" placeholder="全部">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="优惠券名称" required>
                    <el-input v-model="FormValue.name" />
                </el-form-item>
                <el-form-item label="适用平台：">
                    <el-select class="m-2" v-model="type.platformType" placeholder="全部">
                        <el-option v-for="item in types" :key="item.terrace" :label="item.terrace" :value="item.terrace" />
                    </el-select>
                </el-form-item>
                <el-form-item label="总发行量：" required>
                    <el-input v-model="FormValue.publishCount" placeholder="只能输入正整数" />
                </el-form-item>
                <el-form-item label="面额：" required>
                    <el-input v-model="FormValue.amount" placeholder="面额只能为数值，限两位小数">
                        <template #append>元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="每人限领：" required>
                    <el-input v-model="FormValue.perLimit" placeholder="面额只能为数值，限两位小数">
                        <template #append>张</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="使用门槛" required>
                    <el-input v-model="FormValue.minPoint" placeholder="只能输入正整数">
                        <template #prepend>满</template>
                        <template #append>元可用</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="领取日期">
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker v-model="FormValue.startTime" type="date" label="Pick a date" placeholder="选择日期"
                                style="width: 100%" />
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="有效期">
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker v-model="FormValue.enableTime" type="date" label="Pick a date"
                                placeholder="选择日期" style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <span style="margin: 0 7px;">至</span>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker v-model="FormValue.endTime" type="date" label="Pick a date" placeholder="选择日期"
                                style="width: 100%" />
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="可用产品" required>
                    <el-radio-group v-model="type.type" label="size control">
                        <el-radio-button label="全场通用">全场通用</el-radio-button>
                        <el-radio-button label="指定分类">指定分类</el-radio-button>
                        <el-radio-button label="指定商品">指定商品</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <div style="margin:10px 0 20px 100px;" v-show="type.type === '指定分类'">
                    <el-cascader :options="title" :show-all-levels="false" />
                    <el-button>添加</el-button>
                    <el-table border style="width: 100%">
                        <el-table-column label="分类名称" width="260" />
                        <el-table-column label="操作" width="100" />
                    </el-table>
                </div>

                <div style="margin:10px 0 20px 100px;" v-show="type.type === '指定商品'">
                    <div style="display: flex; margin-bottom: 10px;">
                        <el-input v-model="FormValue.perLimit" placeholder=""></el-input>
                        <el-button>添加</el-button>
                    </div>
                    <el-table border style="width: 100%">
                        <el-table-column label="商品名称" width="200" />
                        <el-table-column label="货号" width="80" />
                        <el-table-column label="操作" width="80" />
                    </el-table>
                </div>


                <el-form-item label="备注" required>
                    <el-input v-model="FormValue.note" :autosize="{ minRows: 4, maxRows: 4 }" type="textarea"
                        placeholder="请输入内容" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button>重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
    <div class="con_view">
        <el-card class="box-card">
            <el-form label-position="left" label-width="100px" :model="FormValue" style="max-width: 460px">
                <el-form-item label="优惠券类型：">
                    <el-select class="m-2" v-model="type.couponType" placeholder="全部">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="优惠券名称" required>
                    <el-input v-model="FormValue.name" />
                </el-form-item>
                <el-form-item label="适用平台：">
                    <el-select class="m-2" v-model="type.platformType" placeholder="全部">
                        <el-option v-for="item in types" :key="item.terrace" :label="item.terrace" :value="item.terrace" />
                    </el-select>
                </el-form-item>
                <el-form-item label="总发行量：" required>
                    <el-input v-model="FormValue.publishCount" placeholder="只能输入正整数" />
                </el-form-item>
                <el-form-item label="面额：" required>
                    <el-input v-model="FormValue.amount" placeholder="面额只能为数值，限两位小数">
                        <template #append>元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="每人限领：" required>
                    <el-input v-model="FormValue.perLimit" placeholder="面额只能为数值，限两位小数">
                        <template #append>张</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="使用门槛" required>
                    <el-input v-model="FormValue.minPoint" placeholder="只能输入正整数">
                        <template #prepend>满</template>
                        <template #append>元可用</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="领取日期">
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker v-model="FormValue.startTime" type="date" label="Pick a date" placeholder="选择日期"
                                style="width: 100%" />
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="有效期">
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker v-model="FormValue.enableTime" type="date" label="Pick a date"
                                placeholder="选择日期" style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <span style="margin: 0 7px">至</span>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker v-model="FormValue.endTime" type="date" label="Pick a date" placeholder="选择日期"
                                style="width: 100%" />
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="可用产品" required>
                    <el-radio-group v-model="type.type" label="size control">
                        <el-radio-button label="全场通用">全场通用</el-radio-button>
                        <el-radio-button label="指定分类">指定分类</el-radio-button>
                        <el-radio-button label="指定商品">指定商品</el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <!-- <el-cascader v-model="value" :options="options" @change="handleChange" /> -->

                <el-form-item label="备注" required>
                    <el-input v-model="FormValue.note" :autosize="{ minRows: 4, maxRows: 4 }" type="textarea"
                        placeholder="请输入内容" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button>重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import * as api from '../../json/request/api'
import type { Ref } from "vue"
import { IAddCoupon } from "../../json/request/QmsAdminConreiller/index"
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { IAddCouponData } from "../../json/request/QmsAdminConreiller/index"
import type { CascaderOption } from 'element-plus'

let router = useRouter()
let title = ref([]) as Ref<CascaderOption[]>
const labelPosition = ref('right')
let FormValue = ref({}) as Ref<IAddCoupon>
FormValue.value.perLimit = 1

async function getTitle() {
    let obj = ref([]) as Ref<IAddCouponData[]>
    obj.value = await api.admin.getTitleLists()
}
getTitle()
console.log(title.value);
title.value = [{
    value: '456',
    label: '456',
    children: [{}]
}]

let options = [
    {
        value: "全场赠卷",
        label: "全场赠卷",
    },
    {
        value: "会员赠卷",
        label: "会员赠卷",
    },
    {
        value: "购物赠卷",
        label: "购物赠卷",
    },
    {
        value: "注册赠卷",
        label: "注册赠卷",
    },
];

let types: { coupon: string; goods: string; terrace: string }[] = [
    {
        coupon: "全场赠券",
        goods: "全场通用",
        terrace: "全平台",
    },
    {
        coupon: "会员赠券",
        goods: "指定分类",
        terrace: "移动平台",
    },
    {
        coupon: "购物赠券",
        goods: "指定商品",
        terrace: "PC平台",
    },
    {
        coupon: "注册赠券",
        goods: "",
        terrace: "全场通用",
    },
];
let type = ref({
    couponType: options[0].value,
    platformType: types[0].terrace,
    type: "全场通用",
});

let onSubmit = () => {
    FormValue.value.type = options.findIndex((item) => {
        return type.value.couponType === item.value;
    });
    FormValue.value.type = types.findIndex((item) => {
        return type.value.platformType === item.terrace;
    });
    FormValue.value.useType = types.findIndex((item) => {
        return type.value.type === item.goods;
    });
    FormValue.value.amount = Number(FormValue.value.amount);
    FormValue.value.minPoint = Number(FormValue.value.minPoint);
    // FormValue.value.perLimit = Number(FormValue.value.perLimit)
    FormValue.value.platform = Number(FormValue.value.platform);
    FormValue.value.publishCount = Number(FormValue.value.publishCount);
    console.log(FormValue); // row就是表单数据
    // 二次 确认

    ElMessageBox.confirm("是否确认提交!", "提示", {
        confirmButtonText: "OK",
        cancelButtonText: "Cancel",
        type: "warning",
    })
        .then(async () => {
            await api.admin.addCoupon(FormValue.value);
            ElMessage({
                type: "success",
                message: "操作成功",
            });
            router.push("/sms/coupon");
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "取消提交",
            });
        });
};
</script>

<style scoped>
.con_view {
    margin-top: 60px;
    padding: 10px 20px;
}

.box-card {
    width: 720px;
    padding: 35px 35px 15px 35px;
    margin: 0px auto;
}

.el-radio-group {
    margin-right: 12px;
}
</style>
